<template>
    <view class="container">
        <img src="https://sp4-lanqiao-shop-vue.netlify.app/img/lanqiao-logo.5de12f2e.svg" alt="" class="logo">
        <!-- 将 v-model 改为 phone -->
        <input class="input" type="text" placeholder="请输入您的账号" v-model="phone">
        <input class="input" type="password" placeholder="请输入您的密码" v-model="password">
        <button class="login-button" @click="Login">登录</button>
        <text class="register-text" @click="goRegister">去注册</text>
    </view>
</template>

<script>
import config from '../config.js';
export default {
    data() {
        return {
            phone: '',
            password: '',
            users: []
        };
    },
    // 使用 created 生命周期钩子获取用户数据
    created() {
        uni.request({
            url: config.api_host+'/users',
            method: 'GET',
            success: (res) => {
                this.users = res.data;
            },
            fail: (err) => {
                console.error('读取用户数据失败:', err);
            }
        });
    },
    methods: {
        Login() {
            if (this.phone === '') {
                uni.showToast({
                    title: "用户名不能为空",
                    icon: "none"
                });
                return;
            }
            if (this.password === '') {
                uni.showToast({
                    title: "密码不能为空",
                    icon: "none"
                });
                return;
            }

            let isMatched = false;
            for (let i = 0; i < this.users.length; i++) {
                const user = this.users[i];
                if (user.phone === this.phone && user.password === this.password) {
                    isMatched = true;
					 uni.setStorageSync('userId', user.id);
					 uni.setStorageSync('userPhone', user.phone);
                    break;
                }
            }

            if (isMatched) {
                uni.showToast({
                    title: "登陆成功！",
                    icon: "success"
                });
                
                setTimeout(() => {
                    uni.switchTab({
                    url: `/pages/me/me`
                });
                }, 1500);
            } else {
                uni.showToast({
                    title: "用户名或密码错误",
                    icon: "none"
                });
            }
        },
        goRegister() {
            uni.navigateTo({
                url: `/pages/register/register` 
            });
        }
    }
};
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 850px;
    background-color: #f4f4f4;
    padding: 20px;
}

.logo {
    width: 120px;
    height: 120px;
    margin-bottom: 30px;
}

.input {
    width: 280px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0 15px;
    font-size: 16px;
    margin-bottom: 20px;
}

.login-button {
    width: 120px;
    height: 40px;
    border: none;
    border-radius: 5px;
    background-color: #007AFF;
    color: white;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 10px;
}

.register-text {
    font-size: 16px;
    color: #007AFF;
    cursor: pointer;
    text-decoration: underline;
}
</style>